function randerStudent() {
  axios({
    url: '/students',
    // headers: {
    //   Authorization: localStorage.getItem('token')
    // },
    // data: {
    //   data
    // }
  }).then(res => {
    console.log(res.data)
    document.querySelector('.total').innerText = res.data.data.length
    document.querySelector('.list').innerHTML = res.data.data.map((item, index) => {
      return `
                  <tr>
                      <td>${item.name}</td>
                      <td>${item.age}</td>
                      <td>${item.gender ? '女' : '男'}</td>
                      <td>第${item.group}组</td>
                      <td>${item.hope_salary}</td>
                      <td>${item.salary}</td>
                      <td>${item.province}${item.city}${item.area}</td>
                      <td data-id='${item.id}'>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                      </td>
                  </tr> `}).join('')
  })
}
randerStudent()

// 省市县联动
let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')
// 1.获取省
axios({
  url: '/api/province'
}).then(res => {
  // console.log(res)
  let newArr = res.data.data.map(item => `<option value="${item}">${item}</option>`)
  province.innerHTML = `<option value="">--省份--</option>` + newArr.join('')
})
// 2.获取省后获取市
province.addEventListener('change', function () {
  axios({
    url: '/api/city',
    params: {
      pname: province.value
    }
  }).then(res => {
    let newArr = res.data.data.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML = `<option value="">--城市--</option>` + newArr.join('')
  })
})
// 3.获取市后获取县
city.addEventListener('change', function () {
  axios({
    url: '/api/area',
    params: {
      pname: province.value,
      cname: city.value
    }
  }).then(res => {
    let newArr = res.data.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = `<option value="">--地区--</option>` + newArr.join('')
  })
})

// 点击添加按钮显示弹窗
let modal = new bootstrap.Modal(document.querySelector('#modal'))
document.querySelector('#openModal').addEventListener('click', function () {
  document.querySelector('.modal-title').innerHTML = '添加学员'
  modal.show()
})

// 点击确定进行页面提交     
document.querySelector('#submit').addEventListener('click', function (e) {
  // 点击确认渲染页面     修改成员

  let id = document.querySelector('.modal-title').dataset.id
  let data = val(document.querySelector('#form'))
  data.age = +data.age
  data.gender = +data.gender
  data.group = +data.group
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  if (document.querySelector('.modal-title').innerHTML === '修改学员') {
    axios({
      url: `/students/${id}`,
      method: 'PUT',
      data
    }).then(res => {
      console.log(res)
      message.success(res.data.message)
      modal.hide()            // 模态框隐藏
      document.querySelector('#form').reset()            // 初始化表单
      randerStudent()
    })
  } else {
    axios({
      url: '/students',
      method: 'POST',
      data
    }).then(res => {
      // console.log(res)
      message.success(res.data.message)
      modal.hide()            // 模态框隐藏
      document.querySelector('#form').reset()            // 初始化表单
      randerStudent()
    })
  }
})



// 点击删除进行删除数据
document.querySelector('.list').addEventListener('click', async function (e) {
  let id = e.target.parentNode.parentNode.dataset.id
  if (e.target.classList.contains('bi-trash')) {
    if (confirm('你确定要删除嘛')) {
      // console.log(id)
      axios({
        url: `/students/${id}`,
        method: 'DELETE'
      }).then(res => {
        // console.log(res)
        randerStudent()
      })
    }
  }
  if (e.target.classList.contains('bi-pen')) {
    document.querySelector('.modal-title').innerHTML = '修改学员'
    document.querySelector('.modal-title').setAttribute('data-id', id)    // 设置自定义属性
    modal.show()
    let result = await axios({ url: `/students/${id}` })


    // 数据回填
    let res1 = await axios({
      url: '/api/city',
      params: {
        pname: result.data.data.province
      }
    })

    let res2 = await axios({
      url: '/api/area',
      params: {
        pname: result.data.data.province,
        cname: result.data.data.city
      }
    })
    let newArr = res1.data.data.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML = `<option value="">--城市--</option>` + newArr.join('')

    let newArr2 = res2.data.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = `<option value="">--城市--</option>` + newArr2.join('')

    val(document.querySelector('#form'), result.data.data)
  }
})
